<template>
  <ComponentContainerProperty v-model="formData.style">
    <template #default>
      <el-form :model="formData" label-width="80px" class="compact-form">
        <!-- 布局类型 -->
        <el-form-item label="布局类型" prop="layout">
          <el-radio-group v-model="formData.layout">
            <el-radio value="leftRight">左右布局</el-radio>
            <el-radio value="topBottom">上下布局</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <!-- 左侧顶部广告 -->
        <el-form-item class="section-header">
          <div class="section-title">左侧顶部广告</div>
        </el-form-item>
        <el-card shadow="never" class="ad-config-card">
          <div class="config-section">
            <div class="section-label">图片配置</div>
            <el-form-item label="主图片" prop="leftAds.top.imgUrl" class="compact-item">
              <UploadImg v-model="formData.leftAds.top.imgUrl" :limit="1">
                <template #tip>建议尺寸 300x200px</template>
              </UploadImg>
            </el-form-item>
          </div>
          
          <div class="config-section">
            <div class="section-label">内容配置</div>
            <el-form-item label="标题" prop="leftAds.top.title" class="full-width-item">
              <el-input 
                v-model="formData.leftAds.top.title" 
                placeholder="请输入标题"
                maxlength="20"
                size="small"
              />
            </el-form-item>
            <el-form-item label="副标题" prop="leftAds.top.subtitle" class="full-width-item">
              <el-input 
                v-model="formData.leftAds.top.subtitle" 
                placeholder="请输入副标题（可选）"
                maxlength="30"
                size="small"
              />
            </el-form-item>
            <el-form-item label="按钮文字" prop="leftAds.top.action" class="full-width-item">
              <el-input 
                v-model="formData.leftAds.top.action" 
                placeholder="请输入按钮文字"
                maxlength="10"
                size="small"
              />
            </el-form-item>
            <el-form-item label="跳转链接" prop="leftAds.top.url" class="full-width-item">
              <el-input 
                v-model="formData.leftAds.top.url" 
                placeholder="请输入跳转链接"
                size="small"
                clearable
              />
            </el-form-item>
          </div>
        </el-card>
        
        <!-- 左侧底部广告 -->
        <el-form-item class="section-header">
          <div class="section-title">左侧底部广告</div>
        </el-form-item>
        <el-card shadow="never" class="ad-config-card">
          <div class="config-section">
            <div class="section-label">图片配置</div>
            <el-form-item label="主图片" prop="leftAds.bottom.imgUrl" class="full-width-item">
              <UploadImg v-model="formData.leftAds.bottom.imgUrl" :limit="1">
                <template #tip>建议尺寸 300x200px</template>
              </UploadImg>
            </el-form-item>
            <el-form-item label="装饰图片" prop="leftAds.bottom.decorationImg" class="full-width-item">
              <UploadImg v-model="formData.leftAds.bottom.decorationImg" :limit="1">
                <template #tip>建议尺寸 80x80px，用于装饰展示</template>
              </UploadImg>
            </el-form-item>
          </div>
          
          <div class="config-section">
            <div class="section-label">内容配置</div>
            <el-form-item label="标题" prop="leftAds.bottom.title" class="full-width-item">
              <el-input 
                v-model="formData.leftAds.bottom.title" 
                placeholder="请输入标题"
                maxlength="20"
                size="small"
              />
            </el-form-item>
            <el-form-item label="副标题" prop="leftAds.bottom.subtitle" class="full-width-item">
              <el-input 
                v-model="formData.leftAds.bottom.subtitle" 
                placeholder="请输入副标题（可选）"
                maxlength="30"
                size="small"
              />
            </el-form-item>
            <el-form-item label="跳转链接" prop="leftAds.bottom.url" class="full-width-item">
              <el-input 
                v-model="formData.leftAds.bottom.url" 
                placeholder="请输入跳转链接"
                size="small"
                clearable
              />
            </el-form-item>
          </div>
        </el-card>
        
        <!-- 右侧轮播广告 -->
        <el-form-item class="section-header">
          <div class="section-title">右侧轮播广告</div>
        </el-form-item>
        <el-card shadow="never" class="ad-config-card">
          <div v-for="(banner, index) in formData.rightAds.banners" :key="index" class="banner-item">
            <div class="item-header">
              <span class="item-title">轮播项 {{ index + 1 }}</span>
              <div class="item-actions">
                <el-button 
                  type="danger" 
                  size="small" 
                  @click="removeBanner(index)"
                  :disabled="formData.rightAds.banners.length <= 1"
                >
                  删除
                </el-button>
                <el-button 
                  v-if="index > 0"
                  type="primary" 
                  size="small" 
                  @click="moveBannerUp(index)"
                >
                  上移
                </el-button>
                <el-button 
                  v-if="index < formData.rightAds.banners.length - 1"
                  type="primary" 
                  size="small" 
                  @click="moveBannerDown(index)"
                >
                  下移
                </el-button>
              </div>
            </div>
            
            <div class="config-section">
              <div class="section-label">图片配置</div>
              <el-form-item label="轮播图片" :prop="`rightAds.banners.${index}.imgUrl`" class="compact-item">
                <UploadImg v-model="formData.rightAds.banners[index].imgUrl" :limit="1">
                  <template #tip>400x200px</template>
                </UploadImg>
              </el-form-item>
            </div>
            
            <div class="config-section">
              <div class="section-label">内容配置</div>
              <el-form-item label="标题" :prop="`rightAds.banners.${index}.title`" class="full-width-item">
                <el-input 
                  v-model="formData.rightAds.banners[index].title" 
                  placeholder="请输入标题"
                  maxlength="25"
                  size="small"
                />
              </el-form-item>
              <el-form-item label="副标题" :prop="`rightAds.banners.${index}.subtitle`" class="full-width-item">
                <el-input 
                  v-model="formData.rightAds.banners[index].subtitle" 
                  placeholder="请输入副标题（可选）"
                  maxlength="35"
                  size="small"
                />
              </el-form-item>
              <el-form-item label="按钮文字" :prop="`rightAds.banners.${index}.action`" class="full-width-item">
                <el-input 
                  v-model="formData.rightAds.banners[index].action" 
                  placeholder="请输入按钮文字"
                  maxlength="10"
                  size="small"
                />
              </el-form-item>
              <el-form-item label="跳转链接" :prop="`rightAds.banners.${index}.url`" class="full-width-item">
                <el-input 
                  v-model="formData.rightAds.banners[index].url" 
                  placeholder="请输入跳转链接"
                  size="small"
                  clearable
                />
              </el-form-item>
            </div>
          </div>
          <el-button type="primary" size="small" @click="addBanner">添加轮播项</el-button>
        </el-card>
        
        <!-- 右侧底部项目 -->
        <el-form-item class="section-header">
          <div class="section-title">右侧底部项目</div>
        </el-form-item>
        <el-card shadow="never" class="ad-config-card">
          <div v-for="(item, index) in formData.rightAds.bottomItems" :key="index" class="bottom-item">
            <div class="item-header">
              <span class="item-title">项目 {{ index + 1 }}</span>
              <div class="item-actions">
                <el-button 
                  type="danger" 
                  size="small" 
                  @click="removeBottomItem(index)"
                  :disabled="formData.rightAds.bottomItems.length <= 1"
                >
                  删除
                </el-button>
                <el-button 
                  v-if="index > 0"
                  type="primary" 
                  size="small" 
                  @click="moveBottomItemUp(index)"
                >
                  上移
                </el-button>
                <el-button 
                  v-if="index < formData.rightAds.bottomItems.length - 1"
                  type="primary" 
                  size="small" 
                  @click="moveBottomItemDown(index)"
                >
                  下移
                </el-button>
              </div>
            </div>
            
            <div class="config-section">
              <div class="section-label">图片配置</div>
              <el-form-item label="项目图片" :prop="`rightAds.bottomItems.${index}.imgUrl`" class="compact-item">
                <UploadImg v-model="formData.rightAds.bottomItems[index].imgUrl" :limit="1">
                  <template #tip>50x50px</template>
                </UploadImg>
              </el-form-item>
            </div>
            
            <div class="config-section">
              <div class="section-label">内容配置</div>
              <el-form-item label="标题" :prop="`rightAds.bottomItems.${index}.title`" class="full-width-item">
                <el-input 
                  v-model="formData.rightAds.bottomItems[index].title" 
                  placeholder="请输入标题"
                  maxlength="15"
                  size="small"
                />
              </el-form-item>
              <el-form-item label="副标题" :prop="`rightAds.bottomItems.${index}.subtitle`" class="full-width-item">
                <el-input 
                  v-model="formData.rightAds.bottomItems[index].subtitle" 
                  placeholder="请输入副标题（可选）"
                  maxlength="20"
                  size="small"
                />
              </el-form-item>
              <el-form-item label="徽章文字" :prop="`rightAds.bottomItems.${index}.badge`" class="full-width-item">
                <el-input 
                  v-model="formData.rightAds.bottomItems[index].badge" 
                  placeholder="请输入徽章文字（可选）"
                  maxlength="5"
                  size="small"
                />
              </el-form-item>
              <el-form-item label="跳转链接" :prop="`rightAds.bottomItems.${index}.url`" class="full-width-item">
                <el-input 
                  v-model="formData.rightAds.bottomItems[index].url" 
                  placeholder="请输入跳转链接"
                  size="small"
                  clearable
                />
              </el-form-item>
            </div>
          </div>
          <el-button type="primary" size="small" @click="addBottomItem">添加项目</el-button>
        </el-card>
        
        <!-- 轮播配置 -->
        <el-form-item class="section-header">
          <div class="section-title">轮播配置</div>
        </el-form-item>
        <el-card shadow="never" class="ad-config-card">
          <div class="config-section">
            <div class="section-label">播放设置</div>
            <el-form-item label="自动播放" prop="bannerConfig.autoplay" class="compact-item">
              <el-switch v-model="formData.bannerConfig.autoplay" />
            </el-form-item>
            <el-form-item label="播放间隔" prop="bannerConfig.interval" class="compact-item">
              <el-input-number
                v-model="formData.bannerConfig.interval"
                :min="1000"
                :max="10000"
                :step="500"
                size="small"
                controls-position="right"
              />
              <template #append>毫秒</template>
            </el-form-item>
            <el-form-item label="切换时长" prop="bannerConfig.duration" class="compact-item">
              <el-input-number
                v-model="formData.bannerConfig.duration"
                :min="200"
                :max="2000"
                :step="100"
                size="small"
                controls-position="right"
              />
              <template #append>毫秒</template>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </template>
  </ComponentContainerProperty>
</template>

<script setup lang="ts">
import { AdCubeProperty, AdItem } from './config'
import { useVModel } from '@vueuse/core'

defineOptions({ name: 'AdCubeProperty' })

const props = defineProps<{ modelValue: AdCubeProperty }>()
const emit = defineEmits(['update:modelValue'])

const formData = useVModel(props, 'modelValue', emit)

// 添加轮播项
const addBanner = () => {
  formData.value.rightAds.banners.push({
    imgUrl: '',
    title: '',
    subtitle: '',
    action: '',
    url: ''
  })
}

// 删除轮播项
const removeBanner = (index: number) => {
  if (formData.value.rightAds.banners.length > 1) {
    formData.value.rightAds.banners.splice(index, 1)
  }
}

// 添加底部项目
const addBottomItem = () => {
  formData.value.rightAds.bottomItems.push({
    title: '',
    subtitle: '',
    url: ''
  })
}

// 删除底部项目
const removeBottomItem = (index: number) => {
  if (formData.value.rightAds.bottomItems.length > 1) {
    formData.value.rightAds.bottomItems.splice(index, 1)
  }
}

// 轮播项排序
const moveBannerUp = (index: number) => {
  if (index > 0) {
    const banners = formData.value.rightAds.banners
    const temp = banners[index]
    banners[index] = banners[index - 1]
    banners[index - 1] = temp
  }
}

const moveBannerDown = (index: number) => {
  const banners = formData.value.rightAds.banners
  if (index < banners.length - 1) {
    const temp = banners[index]
    banners[index] = banners[index + 1]
    banners[index + 1] = temp
  }
}

// 底部项目排序
const moveBottomItemUp = (index: number) => {
  if (index > 0) {
    const items = formData.value.rightAds.bottomItems
    const temp = items[index]
    items[index] = items[index - 1]
    items[index - 1] = temp
  }
}

const moveBottomItemDown = (index: number) => {
  const items = formData.value.rightAds.bottomItems
  if (index < items.length - 1) {
    const temp = items[index]
    items[index] = items[index + 1]
    items[index + 1] = temp
  }
}
</script>

<style scoped lang="scss">
// 全局表单项标签样式
:deep(.el-form-item__label) {
  color: #333 !important;
  font-weight: 500;
}

// 全局输入框文字样式
:deep(.el-input__inner) {
  color: #333 !important;
}

:deep(.el-input__inner::placeholder) {
  color: #999 !important;
}

// 单选按钮组文字样式
:deep(.el-radio__label) {
  color: #333 !important;
}

.compact-form {
  .el-form-item {
    margin-bottom: 12px;
    
    .el-form-item__label {
      color: #333 !important;
      font-weight: 500;
    }
  }
}

.section-header {
  margin-bottom: 8px !important;
  
  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 8px 0;
    border-bottom: 2px solid #409eff;
    margin-bottom: 8px;
  }
}

.ad-config-card {
  margin-bottom: 12px;
  
  .config-section {
    margin-bottom: 16px;
    
    .section-label {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      padding: 4px 0;
      border-left: 3px solid #409eff;
      padding-left: 8px;
    }
  }
  
  .banner-item,
  .bottom-item {
    margin-bottom: 12px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 6px;
    
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      
      .item-title {
        font-weight: bold;
        color: #333;
        font-size: 14px;
      }
      
      .item-actions {
        display: flex;
        gap: 4px;
        
        .el-button {
          padding: 4px 8px;
          font-size: 12px;
        }
      }
    }
  }
  
  .form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    
    .form-col {
      flex: 1;
      margin-bottom: 0;
    }
  }
  
  .compact-item {
    margin-bottom: 8px;
  }
  
  .full-width-item {
    margin-bottom: 12px;
    
    .el-form-item__content {
      width: 100%;
    }
    
    .el-form-item__label {
      color: #333 !important;
      font-weight: 500;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .compact-form {
    .el-form-item__label {
      width: 60px !important;
      font-size: 12px;
      color: #333 !important;
      font-weight: 500;
    }
    
    .el-input__inner {
      color: #333 !important;
    }
    
    .el-radio__label {
      color: #333 !important;
    }
  }
  
  .ad-config-card {
    .form-row {
      flex-direction: column;
      gap: 4px;
      
      .form-col {
        width: 100%;
      }
    }
    
    .item-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      
      .item-actions {
        width: 100%;
        justify-content: flex-end;
      }
    }
    
    .full-width-item {
      .el-form-item__label {
        width: 60px !important;
        font-size: 12px;
        color: #333 !important;
        font-weight: 500;
      }
    }
  }
}

@media (max-width: 480px) {
  .compact-form {
    .el-form-item__label {
      width: 50px !important;
      color: #333 !important;
      font-weight: 500;
    }
    
    .el-input__inner {
      color: #333 !important;
    }
    
    .el-radio__label {
      color: #333 !important;
    }
  }
  
  .ad-config-card {
    .banner-item,
    .bottom-item {
      padding: 6px;
    }
    
    .item-actions {
      .el-button {
        padding: 2px 6px;
        font-size: 11px;
      }
    }
    
    .full-width-item {
      .el-form-item__label {
        width: 50px !important;
        font-size: 11px;
        color: #333 !important;
        font-weight: 500;
      }
    }
  }
}
</style>
